<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>图片裁剪</title>
        <link rel="stylesheet" href="images/jquery.Jcrop.min.css">
        <link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/nav.css" />
		<style media="screen">
		#croppingBox {min-width: 400px;}
		.jcrop-holder {margin: 0 auto;}
		</style>
    </head>

    <body>
        <button type="button" class="btn btn-primary btn-sm btn-default editor" data-toggle="modal" data-target="">编辑</button>
        <!-- 编辑 -->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" id="editUser" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                        </button>
                            <h4 class="modal-title" id="myLargeModalLabel">会员信息</h4>

                    </div>
                    <div class="modal-body" style="overflow:auto">
                        <div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">*用户名</label>
                            <div class="col-sm-10 goods-lb-r">
                                <input type="text" class="form-control" id="suserName" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">*密码</label>
                            <div class="col-sm-10 goods-lb-r">
                                <input type="password" class="form-control" id="smobile" placeholder="密码">
                            </div>
                        </div>
                        <!-- <div class="form-group">
               <label class="col-sm-2 control-label goods-lb-l">套餐类型</label>
               <div class="col-sm-10 goods-lb-r">
                 <select class="form-control drop-down" id="">
                   <option value="0">请选择套餐</option>
                   <option value="1">套餐1</option>
                   <option value="2">套餐2</option>
                   <option value="3">套餐3</option>
                 </select>
               </div>
             </div> -->
						 <!-- <div class="form-group">
							 <label class="col-sm-2 control-label goods-lb-l">真实姓名</label>
							 <div class="col-sm-10 goods-lb-r">
								 <input type="text" class="form-control" id="suserName" placeholder="真实姓名">
							 </div>
						 </div> -->
						 <div class="form-group">
                             <label class="col-sm-2 control-label goods-lb-l">性别</label>
                             <div class="col-sm-10 goods-lb-r" style="padding-top:7px;" id="sstatus">
                                 <label>
                                     <input type="radio" name="optionsRadios" id="status1" value="0">保密</label>
                                 <label>
                                     <input type="radio" name="optionsRadios" id="status0" value="1">男</label>
									 <label>
	                                     <input type="radio" name="optionsRadios" id="status0" value="2">女</label>
                             </div>
                         </div>
						 <div class="form-group">
							 <label class="col-sm-2 control-label goods-lb-l">QQ</label>
							 <div class="col-sm-10 goods-lb-r">
								 <input type="text" class="form-control" id="suserName" placeholder="QQ">
							 </div>
						 </div>
						 <div class="form-group">
							 <label class="col-sm-2 control-label goods-lb-l">阿里旺旺</label>
							 <div class="col-sm-10 goods-lb-r">
								 <input type="text" class="form-control" id="suserName" placeholder="阿里旺旺">
							 </div>
						 </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">上传头像</label>
                            <div class="col-sm-10 goods-lb-r">
								<form id="add" enctype="multipart/form-data">
						            <input type="file" multiple="" onchange="imgup(this)" class="form-control"  name="file" placeholder="上传头像">
									<!-- <input type="file" name="filepath" multiple="" id="imgFile" onchange="imgup(this)"> -->
						        </form>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">允许发表言论</label>
                            <div class="col-sm-10 goods-lb-r" style="padding-top:7px;" id="sstatus">
                                <label>
                                    <input type="radio" name="optionsRadios" id="status1" value="1">允许</label>
                                <label>
                                    <input type="radio" name="optionsRadios" id="status0" value="0">禁止</label>
                            </div>
                        </div>
						<div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">举报商品</label>
                            <div class="col-sm-10 goods-lb-r" style="padding-top:7px;" id="sstatus">
								<label>
                                    <input type="radio" name="optionsRadios" id="status1" value="1">允许</label>
                                <label>
                                    <input type="radio" name="optionsRadios" id="status0" value="0">禁止</label>
                            </div>
                        </div>
						<div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">允许购买商品</label>
                            <div class="col-sm-10 goods-lb-r" style="padding-top:7px;" id="sstatus">
								<label>
                                    <input type="radio" name="optionsRadios" id="status1" value="1">允许</label>
                                <label>
                                    <input type="radio" name="optionsRadios" id="status0" value="0">禁止</label>
                            </div>
                        </div>
						<div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">允许发表言论</label>
                            <div class="col-sm-10 goods-lb-r" style="padding-top:7px;" id="sstatus">
								<label>
                                    <input type="radio" name="optionsRadios" id="status1" value="1">允许</label>
                                <label>
                                    <input type="radio" name="optionsRadios" id="status0" value="0">禁止</label>
                            </div>
                        </div>
						<div class="form-group">
                            <label class="col-sm-2 control-label goods-lb-l">允许登陆</label>
                            <div class="col-sm-10 goods-lb-r" style="padding-top:7px;" id="sstatus">
								<label>
                                    <input type="radio" name="optionsRadios" id="status1" value="1">允许</label>
                                <label>
                                    <input type="radio" name="optionsRadios" id="status0" value="0">禁止</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="entBtn">确认提交</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

		<div class="modal fade" tabindex="-1" role="dialog" id="croppingBox">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">头像裁剪</h4>
		      </div>
		      <div class="modal-body" id="imgBoxc">

		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="btn">提交</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <!-- <button type="button" id="btn" name=""></button> -->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.Jcrop.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="plugin/layer/layer.js"></script>

    </body>
	<script type="text/javascript">

		function updateCoords(c) {
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
			// console.log(c.x,c.y,c.w,c.h)
		};
		$('#croppingBox').on('hidden.bs.modal', function (e) {
			$('#imgBoxc').html('')
		})
		function imgup(upImg) {
		 var datas = new FormData($('#add')[0]);
		 $.ajax({
		     url: 'http://192.168.1.30/erp/uploadPic/update',
		     type: "post",
		     dataType: "json",
		     cache: false,
		     contentType: false,
		     processData: false,
		     data:datas,
		     xhrFields: {
		         withCredentials: true
		     },
		     success: function (data) {
		         if (data.code == 200) {
					 var srcs = getObjectURL(upImg.files[0]);
 					$('#imgBoxc').html('<img id="element_id" src="' + srcs + '">')
 					$('#croppingBox').modal();
 					var jcropApi;
 					$('#element_id').Jcrop({
 						allowSelect: true,
 						baseClass: 'jcrop',
 						aspectRatio: 1,
 						boxWidth:400,
 						boxHeight:400,
 						onSelect: updateCoords
 					}, function() {
 						jcropApi = $(this);
 					});
		         }
		     }
		 });
		 return false
		}
		$('#btn').click(function() {
			$.ajax({
				url: 'http://192.168.1.30/erp/uploadPic/Upload',
				type: "post",
				dataType: "json",
				data: {
					'x': parseInt($('#x').val()),
					'y': parseInt($('#y').val()),
					'width': parseInt($('#w').val()),
					'height': parseInt($('#h').val())
				},
				xhrFields: {
					withCredentials: true
				},
				success: function(data) {
					window.location.href=data.data[0];
				}
			});
		})

		 $('.editor').click(function() {
			$('#editUser').modal()
		})
		 //建立一個可存取到該file的url

		function getObjectURL(fis) {
			var urls = null;
			// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
			// basic
			if (window.createObjectURL != undefined) {
				urls = window.createObjectURL(fis);
				// mozilla(firefox)
			} else if (window.URL != undefined) {
				urls = window.URL.createObjectURL(fis);
				// webkit or chrome
			} else if (window.webkitURL != undefined) {
				urls = window.webkitURL.createObjectURL(fis);
			}
			return urls;
		}

	</script>

</html>
